<template>
  <div>
    <!-- 审批 & 修改-->
    <el-dialog
      :width="type == 'audit' ? '700px' : '600px'"
      :title="type == 'audit' ? '审核' : '修改'"
      destroy-on-close
      append-to-body
      :visible.sync="show"
      :before-close="cancel">
      <el-form
        ref="elForm"
        :model="form"
        :rules="rules"
        label-width="140px"
        label-position="right"
        size="mini">
        <div style="display: flex; gap: 20px">
          <div style="flex: 1">
            <el-form-item label="商家名称:">
              <el-input :disabled="type == 'audit'" v-model="form.merchantName" />
            </el-form-item>
            <el-form-item label="商家地址:">
              <el-input :disabled="type == 'audit'" v-model="form.merchantAddress" />
            </el-form-item>
            <el-form-item label="商家电话:">
              <el-input :disabled="type == 'audit'" v-model="form.merchantTel" />
            </el-form-item>
            <el-form-item label="邮箱:">
              <el-input :disabled="type == 'audit'" v-model="form.email" />
            </el-form-item>
            <el-form-item label="商家营业开始时间:">
              <el-time-select
                :disabled="type == 'audit'"
                v-model="form.merchantTradeStartTime"
                style="width: 100%"
                :picker-options="{
                  start: '06:30',
                  step: '00:10',
                }" />
            </el-form-item>
            <el-form-item label="商家营业结束时间:">
              <el-time-select
                :disabled="type == 'audit'"
                style="width: 100%"
                :picker-options="{
                  start: '06:30',
                  step: '00:10',
                }"
                v-model="form.merchantTradeEndTime" />
            </el-form-item>
            <el-form-item label="推荐人:">
              <el-input disabled v-model="form.referrerName" />
            </el-form-item>
          </div>
          <!-- *******************************手续费率******************************* -->
          <div style="flex: 1" v-if="type == 'audit'">
            <el-form-item label="亚马逊手续费率:" prop="amazonHandingFee">
              <el-input type="number" v-model.number="form.amazonHandingFee">
                <template #append>%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="乐天手续费率:" prop="lotteHandingFee">
              <el-input type="number" v-model.number="form.lotteHandingFee">
                <template #append>%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="雅虎拍卖手续费率:" prop="yahooAuctionHandingFee">
              <el-input v-model="form.yahooAuctionHandingFee">
                <template #append>%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="雅虎商城手续费率:" prop="yahooMallHandingFee">
              <el-input type="number" v-model.number="form.yahooMallHandingFee">
                <template #append>%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="煤炉法人手续费率:" prop="mercariHandingFee">
              <el-input type="number" v-model.number="form.mercariHandingFee">
                <template #append>%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="煤炉个人手续费率:" prop="mercariIndividualHandingFee">
              <el-input type="number" v-model.number="form.mercariIndividualHandingFee">
                <template #append>%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="沃尔玛手续费率:" prop="walmartHandingFee">
              <el-input type="number" v-model.number="form.walmartHandingFee">
                <template #append>%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="Qoo10手续费率:" prop="qoo10HandingFee">
              <el-input type="number" v-model.number="form.qoo10HandingFee">
                <template #append>%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="线下取货手续费率:" prop="offlineHandingFee">
              <el-input type="number" v-model.number="form.offlineHandingFee">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </div>
        </div>

        <!-- ******************************************************* -->
        <el-form-item label="推荐人:" prop="referrerProportion">
          <div class="_item">
            <div class="_item_name text-ellipsis" :title="form.referrerName">
              {{ form.referrerName }}
            </div>
            <el-input
              :disabled="type == 'edit'"
              class="_item_input"
              type="number"
              v-model.number="form.referrerProportion">
              <el-button slot="prepend"> 比例 </el-button>
              <el-button slot="append">%</el-button>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item
          label="推荐人上级:"
          :prop="form.referrerSuperProportion ? 'referrerSuperProportion' : ''">
          <div class="_item">
            <div class="_item_name text-ellipsis" :title="form.referrerSuperName">
              {{ form.referrerSuperName }}
            </div>
            <el-input
              :disabled="type == 'edit'"
              class="_item_input"
              type="number"
              v-model.number="form.referrerSuperProportion">
              <el-button slot="prepend"> 比例 </el-button>
              <el-button slot="append">%</el-button>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="总公司:" prop="headOfficeProportion">
          <div class="_item">
            <div class="_item_name text-ellipsis" :title="form.headOfficeName">
              {{ form.headOfficeName }}
            </div>
            <el-input
              :disabled="type == 'edit'"
              type="number"
              class="_item_input"
              v-model.number="form.headOfficeProportion">
              <el-button slot="prepend"> 比例 </el-button>
              <el-button slot="append">%</el-button>
            </el-input>
          </div>
        </el-form-item>
        <div
          v-if="type == 'audit'"
          style="height: 250px; border: solid 1px gainsboro; border-radius: 4px; padding: 14px 20px">
          <strong>租户有效期</strong>
          <el-form-item style="margin-top: 10px" label-width="114px" label="是否长期有效:" prop="expireType">
            <el-radio v-model="form.expireType" :label="1">是</el-radio>
            <el-radio v-model="form.expireType" :label="0">否</el-radio>
          </el-form-item>
          <div
            style="
              height: 140px;
              border: solid 1px gainsboro;
              border-radius: 4px;
              margin: 0 14px;
              padding: 20px;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
            ">
            <el-form-item v-if="form.expireType == 0" label-width="90px" label="有效期至:" prop="expireTime">
              <el-date-picker
                v-model="form.expireTime"
                type="date"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display: flex; justify-content: end">
        <el-button size="small" @click="cancel" style="margin-right: 10px">
          <!-- 取消 -->
          {{ $t('取消') }}
        </el-button>
        <!-- ******************* 审核 ********************* -->
        <div v-if="type == 'audit'">
          <el-button size="small" @click="handleAudit(3)" type="warning">
            <!-- 驳回 -->
            驳回
          </el-button>
          <el-button size="small" @click="handleAudit(2)" type="primary">
            <!-- 通过 -->
            通过
          </el-button>
        </div>
        <!-- ******************* 审核 end********************* -->
        <!-- ******************* 修改 ********************* -->
        <div v-if="type == 'edit'">
          <el-button size="small" @click="handleAEit" type="primary">
            <!-- 修改 -->
            {{ $t('编辑') }}
          </el-button>
        </div>
        <!-- ******************* 修改 end********************* -->
      </div>
    </el-dialog>
    <RechargeDetails :show.sync="TopUpNowPopFlage"></RechargeDetails>
  </div>
</template>

<script>
import RechargeDetails from '@/components/RechargeDetails/index.vue'
import { detail, apply, edit } from '@/api/platform/recommenSellerAudit'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  components: { RechargeDetails },
  props: {
    /**
     * type
     */
    type: {
      type: String,
      required: true,
    },
    /**
     * formData
     */
    formData: {
      type: Object,
      required: true,
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      TopUpNowPopFlage: false, //充值中心
      form: {
        /**总公司ID */
        headOfficeId: '',
        /**推荐人上级ID */
        referrerSuperId: '',
        distrId: '',
        id: '',
        referrerId: '',
        merchantName: '',
        merchantAddress: '',
        merchantTel: '',
        email: '',
        referrerName: '',
        merchantTradeStartTime: '',
        merchantTradeEndTime: '',
        referrerProportion: '',
        referrerSuperProportion: '',
        referrerSuperName: '',
        headOfficeProportion: '',
        headOfficeName: '',
        offlineHandingFee: '',
      },
      rules: {
        amazonHandingFee: [{ message: '请输入', required: true, trigger: 'blur' }],
        lotteHandingFee: [{ message: '请输入', required: true, trigger: 'blur' }],
        yahooAuctionHandingFee: [{ message: '请输入', required: true, trigger: 'blur' }],
        yahooMallHandingFee: [{ message: '请输入', required: true, trigger: 'blur' }],
        mercariHandingFee: [{ message: '请输入', required: true, trigger: 'blur' }],
        mercariIndividualHandingFee: [{ message: '请输入', required: true, trigger: 'blur' }],
        walmartHandingFee: [{ message: '请输入', required: true, trigger: 'blur' }],
        qoo10HandingFee: [{ message: '请输入', required: true, trigger: 'blur' }],
        offlineHandingFee: [{ message: '请输入', required: true, trigger: 'blur' }],
        expireType: [{ message: '请选择', required: true, trigger: 'blur' }],
        expireTime: [{ message: '请选择', required: true, trigger: 'blur' }],
        referrerProportion: [
          {
            validator: this.valid,
            required: true,
            trigger: 'blur',
          },
        ],
        referrerSuperProportion: [
          {
            validator: this.valid,
            required: true,
            trigger: 'blur',
          },
        ],
        headOfficeProportion: [
          {
            validator: this.valid,
            required: true,
            trigger: 'blur',
          },
        ],
      },
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getDetails()
      }
    },
  },
  methods: {
    /**去充值 */
    TopUpNow() {
      this.TopUpNowPopFlage = true
    },
    handleAEit() {
      edit(this.form).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })

          this.cancel()
          this.$emit('getList')
        }
      })
    },

    /**验证推荐人 */
    valid(rule, value, callback) {
      // console.log(
      //   `rule, value, ==>`,
      //   JSON.parse(JSON.stringify({ rule, value }))
      // );
      const { field } = rule
      const {
        /** 推荐人*/
        referrerProportion,
        /** 推荐人上级*/
        referrerSuperProportion,
        /** 总公司*/
        headOfficeProportion,
      } = this.form

      if (!value) {
        return callback(new Error('请输入'))
      }

      if (field == 'referrerProportion' /**推荐人 */) {
        if (+referrerProportion > 100 || +referrerProportion < 0) {
          return callback(new Error('取值范围在0~100'))
        }
      }

      if (field == 'referrerSuperProportion' /**推荐人上级 */) {
        if (+referrerSuperProportion > 100 || +referrerSuperProportion < 0) {
          return callback(new Error('取值范围在0~100'))
        }
      }

      if (field == 'headOfficeProportion' /**总公司 */) {
        if (+headOfficeProportion > 100 || +headOfficeProportion < 0) {
          return callback(new Error('取值范围在0~100'))
        }
      }

      const total = +referrerProportion + +referrerSuperProportion + +headOfficeProportion

      if (total > 100) {
        callback(new Error('总和不能超过100'))
      }
      return callback()
    },

    getDetails() {
      detail(this.formData.id).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          // console.log(`res ==>`, JSON.parse(JSON.stringify(res)));
          Object.keys(this.form).forEach((key) => {
            this.form[key] = data[key]
          })
        }
      })
    },

    handleAudit(status) {
      // 审核状态 2-审批通过 3-审批拒绝
      if (status == 2) {
        // 判断分成相加是否为100
        const {
          /** 推荐人*/
          referrerProportion,
          /** 推荐人上级*/
          referrerSuperProportion,
          /** 总公司*/
          headOfficeProportion,
        } = this.form
        const total = +referrerProportion + +referrerSuperProportion + +headOfficeProportion

        if (this.form.referrerSuperProportion && total != 100) {
          return this.$message.error('比例总和必须为100')
        }
        this.$refs['elForm'].validate(async (valid) => {
          if (valid) {
            this.handleApplay(status)
          }
        })
      }
      if (status == 3) {
        this.handleApplay(status)
      }
    },
    handleApplay(status) {
      const data = {
        ...this.form,
        status,
      }
      apply(data).then((res) => {
        const { code, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })

          this.cancel()
          this.$emit('getList')
        }
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
._item {
  display: flex;
  &_name {
    flex: 2;
    text-align: center;
  }
  &_input {
    flex: 3;
  }
}
</style>
